<template>
    <div>
        <Card>
            <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"/>
            <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="100" :current="1" @on-change="changePage"></Page>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
    import Tables from '../../components/tables'

    export default {
        name: 'user_index',
        components: {
            Tables
        },
        data() {
            return {
                columns: [
                    {title: 'Name', key: 'name', sortable: true},
                    {title: 'Email', key: 'email', editable: true},
                    {title: 'Create-Time', key: 'createTime'},
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }

                ],
                tableData: [
                    {
                        name: '张三',
                        email: '754124441@qq.com',
                        createTime: new Date()
                    },
                    {
                        name: '李四',
                        email: '754124441@qq.com',
                        createTime: new Date()
                    },
                    {
                        name: '王五',
                        email: '754124441@qq.com',
                        createTime: new Date()
                    },

                ]
            }
        },
        methods: {
            mockTableData() {
                let data = [];
                for (let i = 0; i < 10; i++) {
                    data.push({
                        name: 'Business' + Math.floor(Math.random() * 100 + 1),
                        email: '123234354@qq.com',
                        createTime: new Date()
                    })
                }
                return data;
            },
            exportExcel() {
                this.$refs.tables.exportCsv({
                    filename: `table-${(new Date()).valueOf()}.csv`
                })
            },
            show(index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.tableData[index].name}<br>Age：${this.tableData[index].email}<br>Address：${this.tableData[index].createTime}`
                })
            },
            remove(index) {
                this.tableData.splice(index, 1);
            },
            changePage() {
                // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
                this.tableData = this.mockTableData();
            }

        },
        mounted() {
        }
    }
</script>

<style>

</style>
